<template>
  <div>
    <div class="chat_info_li clearBoth" >
      <span class="chat_info_li_title">{{$t('webchat.platformName')}}:</span>
      <span v-html="chatInfo.accessName ? chatInfo.accessName : $t('webchat.nothing')" class="chat_info_li_con"></span>
    </div>
    <div class="chat_info_li clearBoth" >
      <span class="chat_info_li_title">{{$t('webchat.browser')}}:</span>
      <span v-html="webchatData.ubaInfo && webchatData.ubaInfo.browserName ? webchatData.ubaInfo.browserName : $t('webchat.nothing')" class="chat_info_li_con"></span>
    </div>
    <div class="chat_info_li clearBoth" >
      <span class="chat_info_li_title">{{$t('webchat.osInfo')}}:</span>
      <span v-html="webchatData.ubaInfo && webchatData.ubaInfo.osInfo ? webchatData.ubaInfo.osInfo : $t('webchat.nothing')" class="chat_info_li_con"></span>
    </div>
    <div class="chat_info_li clearBoth">
      <span class="chat_info_li_title">{{$t('webchat.converNum')}}:</span>
      <span v-html="chatInfo.dialogueTimes !== undefined ? chatInfo.dialogueTimes : $t('webchat.nothing')" class="chat_info_li_con"></span>
    </div>
    <div class="chat_info_li clearBoth">
      <span class="chat_info_li_title">{{$t('webchat.invitationNum')}}:</span>
      <span v-html="chatInfo.inviteTimes !== undefined ? chatInfo.inviteTimes : $t('webchat.nothing')" class="chat_info_li_con"></span>
    </div>
    <div class="chat_info_li clearBoth" >
      <span class="chat_info_li_title">{{$t('webchat.assistAgent')}}:</span>
      <span v-html="webchatData.assistAgent ? webchatData.invitedUserName : $t('webchat.nothing')" class="chat_info_li_con"></span>
    </div>
    <div class="chat_info_li clearBoth" >
      <span class="chat_info_li_title">{{$t('webchat.invitationStatus')}}:</span>
        <span v-html="!webchatData.inviteUserStatus ? $t('webchat.noInvite') : webchatData.inviteUserStatus === 'accept' ? $t('webchat.accecptInvite') : $t('webchat.noAccecptInvite')" class="chat_info_li_con"></span>
    </div>
    <div class="chat_info_li clearBoth" >
      <span class="chat_info_li_title">{{$t('webchat.are')}}&{{$t('webchat.ipAdress')}}:</span>
      <span class="chat_info_li_con">{{webchatData.area}}  {{webchatData.ip}}</span>
    </div>
    <div class="chat_info_li clearBoth" >
      <span class="chat_info_li_title">{{$t('webchat.searchForSource')}}:</span>
      <span class="chat_info_li_con" v-show="webchatData.seoSource && webchatData.seoSource !== 'undefined'">{{webchatData.seoSource}}</span>
    </div>
    <div class="chat_info_li clearBoth" >
      <span class="chat_info_li_title">{{$t('webchat.seoKeywords')}}:</span>
      <span class="chat_info_li_con" v-show="webchatData.seoKeywords && webchatData.seoKeywords !== 'undefined'">{{webchatData.seoKeywords}}</span>
    </div>
    <div class="chat_info_li clearBoth" >
      <span class="chat_info_li_title">{{$t('webchat.fromSkillGroup')}}:</span>
      <span class="chat_info_li_con">{{queueName}}</span>
    </div>
    <div class="chat_info_li clearBoth" >
      <span class="chat_info_li_title">{{$t('webchat.searchForSourceUpper')}}:</span>
      <a v-if="webchatData.referrer && webchatData.referrer !== 'undefined'" class="chat_info_li_con ellipsis" :title="webchatData.referrer" :href="webchatData.referrer" target="_blank">{{webchatData.referrer}}</a>
      <span v-else class="chat_info_li_con">{{$t('customer.unknownSource')}}</span>
    </div>
    <div class="chat_info_li clearBoth" >
      <span class="chat_info_li_title">{{$t('webchat.chatSource')}}:</span>
      <a v-if="webchatData.fromUrl && webchatData.fromUrl !== 'undefined'" class="chat_info_li_con ellipsis" :title="webchatData.fromUrl" :href="webchatData.fromUrl" target="_blank">{{webchatData.fromUrl}}</a>
      <span v-else class="chat_info_li_con">{{$t('customer.unknownSource')}}</span>
    </div>
    <div class="chat_info_li clearBoth" >
      <span class="chat_info_li_title">{{$t('webchat.landingPageUrl')}}:</span>
      <a v-if="webchatData.landingPageUrl && webchatData.landingPageUrl !== 'undefined'" class="chat_info_li_con ellipsis" :title="webchatData.landingPageUrl" :href="webchatData.landingPageUrl" target="_blank">{{webchatData.landingPageUrl}}</a>
      <span v-else class="chat_info_li_con">{{$t('webchat.undefinedlandingPage')}}</span>
    </div>
    <div class="chat_info_remark chat_info_li">
      <span class="chat_info_li_title">{{$t('public.remark')}}</span>
      <textarea class="chat_info_li_remarks" rows="3" :placeholder="$t('public.pleaseEnter')" v-on:focus="cloneRemark($event)" v-on:blur="editRemark($event)" v-model="mark"></textarea>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'BaseInfo',
  data: function () {
    return {
      mark: ''
    }
  },
  props: {
    chatInfo: {
      type: Object,
      default: () => {
        return {
        }
      }
    },
    webchatData: {
      type: Object,
      default: () => {
        return {
        }
      }
    },
    remark: String,
    queueName: String,
    channelSourceName: String
  },
  watch: {
    remark (cur) {
      this.mark = cur
    }
  },
  methods: {
    editRemark (event) {
      if (this.remarkClone !== event.target.value) {
        let remark = {
          accessId: this.webchatData.accessId,
          sid: this.webchatData.sid,
          _id: this.webchatData._id,
          content: event.target.value
        }
        this.$store.dispatch('updateWebchatSessionRemark', remark).then(() => {
          this.remarkClone = event.target.value
        })
      }
    },
    cloneRemark (event) {
      this.remarkClone = event.target.value
    }
  },
  beforeMount () {
    this.mark = this.remark
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .basic_info
    padding 10px 14px 0
    max-height calc( 100vh - 206px)
    box-sizing border-box
    overflow auto
    h3
      margin-bottom 6px
      user-select none
  .chat_info_li_con,
  .chat_auxiliary_from .link
    color $cf-gray1
    float right
  a.chat_info_li_con
    color $c-main
    max-width calc(100% - 90px)
  .chat_info_li_title,.chat_auxiliary_title,.chat_info_all i
    color $cf-gray3
    font-style normal
  .chat_auxiliary_title
    white-space nowrap
  .chat_info_li_remarks
    resize none
    font-size 12px
    box-sizing border-box
    width 100%
    margin-top 6px
    border-color $cf-gray5
    padding 6px
    border-radius 4px
  .chat_info_li_remarks:focus
    border-color $c-main
  .chat_info_li
    margin-bottom 5px
    padding-right 4px
    box-sizing border-box
</style>
